<template>
  <div>
    <el-row>
      <el-col :span="4" class="index_hz1">
        <div class="index_hz1_1">
          <img src="../assets/index_1.png" width="35" />
          <span>&nbsp;&nbsp;智慧宿管云平台</span>
        </div>
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#304156"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <router-link to="/index">
                <el-menu-item index="index+'">
                  <i class="el-icon-setting"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
              </router-link>
              <el-submenu :index="String(index)" v-for="(item,index) in list" :key="index">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>{{item.meta.title}}</span>
                </template>

                <el-menu-item-group
                  :index="String(index2)"
                  v-for="(item,index2) in item.children"
                  :key="index2"
                >
                  <router-link :to="item.path">
                    <el-menu-item>{{item.meta.title}}</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" class="index_hz2">
        <el-row>
          <el-col :span="24" class="index_hz2_1">
            <span style=" float: left;">
              <i class="el-icon-s-fold" />
              <span style="color: #8d8d8d;">
                &nbsp;&nbsp;&nbsp;首页
                <span style="color:#c1c1c1">/基础数据/班级管理</span>
              </span>
            </span>
            <div class="index_hz2_2">
              <i class="el-icon-zoom-in" />
              <i class="el-icon-s-operation" />
              <i class="el-icon-edit" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <el-dropdown id="lalala">
                <span class="el-dropdown-link">
                  <img src="../assets/tou.png" style="position: relative;top:10px;" />&nbsp;&nbsp;
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="z-index=9">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>布局设置</el-dropdown-item>
                  <el-dropdown-item divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <div class="index_hz2_3">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="班级名称">
                <el-input
                  v-model="formInline.class"
                  placeholder="请输入班级名称"
                  style="position: relative;top:21px;"
                ></el-input>
              </el-form-item>
              <el-form-item label="班主任">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入班主任名称"
                  style="position: relative;top:21px;"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="formInline.region"
                  placeholder="班级状态"
                  style="position: relative;top:21px;"
                >
                  <el-option
                    :label="item.dictLabel"
                    :value="item.dictSort"
                    v-for="(item,index) in see"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="position: relative;top:21px;"
                  icon="el-icon-search"
                >搜索</el-button>
                <el-button type="primary" @click="reset" style="position: relative;top:21px;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-button type="primary" style="margin-left:20px;" @click="dialogVisible = true">+新增</el-button>
          <el-button type="success" disabled>修改</el-button>
          <el-button type="danger" disabled>删除</el-button>
          <el-table :data="tableData" style="width: 100%;font-size:12px;" height="500px">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column align="center" prop="id" label="序号" width="180"></el-table-column>
            <el-table-column align="center" prop="className" label="班级名称" width="180"></el-table-column>
            <el-table-column align="center" prop="classTeacherName" label="班主任"></el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column align="center" prop="modifyTime" label="修改时间"></el-table-column>
            <el-table-column align="center" prop="look" label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="tableData[scope.$index].status"
                  :inactive-value='"0"'
                  :active-value='"1"'
                  active-color="#b90c0c"
                  inactive-color="#0269ad"
                  @change="changSwitch(scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="like" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  @click="updata(scope.row.id)"
                  icon="el-icon-edit"
                  circle
                  style="margin-left:-10px;"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  style="position: relative;top:-4px;"
                 ]
                  @click="del()"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="float:right;margin-right:50px;margin-top:50px"
          ></el-pagination>
        </el-row>
      </el-col>//修改
      <el-dialog
        title="修改班级信息"
        :visible.sync="dialogVisible2"
        width="45%"
        :before-close="handleClose"
      >
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="班级名称" prop="name">
            <el-input v-model="upda.className" style="witdh:200px;" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="班主任" prop="region">
            <el-select v-model="upda.classTeacherId">
              <el-option
                :label="item.username"
                :value="item.id"
                v-for="(item,index) in zhuren"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="updata2()">确 定</el-button>
        </span>
      </el-dialog>//添加
      <el-dialog
        title="添加班级信息"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
      >
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="班级名称" prop="name">
            <el-input v-model="ruleForm.name" style="witdh:200px;"></el-input>
          </el-form-item>
          <el-form-item label="班主任" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option
                :label="item.username"
                :value="item.id"
                v-for="(item,index) in zhuren"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add()">确 定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zhuren: [],
      dialogVisible: false,
      dialogVisible2: false,
      pageIndex: 0,
      total: 0,
      totalPage: 0,
      currentPage4: 4,
      formInline: {
        user: "",
        region: "",
        class: ""
      },
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      idd: "",
      upda: [],
      see: [],
      list: [],
      value: "",
      index: "",
      tableData: [
        {
          id: ""
        }
      ],
      ruleForm: {
        name: "",
        region: ""
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // var that = this;
      this.$axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=1&pageSize=${val}`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // this.pageIndex = val;
      this.$axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=${val}&pageSize=10`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    reset() {
      (this.formInline.user = ""),
        (this.formInline.region = ""),
        (this.formInline.class = "");
    },
    left() {
      let that = this;
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/sys/menu/getRouters",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(op => {
        // console.log(op);
        this.list = op.data.data;
      });
    },
    onSubmit() {
      this.tab();
    },
    look() {
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/sys/dict/detail/dictType/sys_normal_disable",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(looks => {
        this.see = looks.data.data;
      });
    },
    tab() {
      // console.log(this.$data.formInline);
      this.$axios({
        method: "get",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bclass/list?className=" +
          this.$data.formInline.class +
          "&classTeacherName=" +
          this.$data.formInline.user +
          "&status=" +
          this.$data.formInline.region +
          "&pageNum=1&pageSize=5",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(table => {
        this.total = table.data.data.total;
        this.totalPage = table.data.data.totalPage;

        this.tableData = table.data.data.list;
      });
    },

    banzhur() {
      this.$axios({
        method: "get",
        url: "http://122.112.253.28:8095/prod-api/sys/user/getClassTeacherList",
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(one => {
        console.log(one);
        this.zhuren = one.data.data;
      });
    },
    add() {
      this.$axios({
        method: "post",
        url: "http://122.112.253.28:8095/prod-api/basedata/bclass/create",
        data: {
          className: this.ruleForm.name,
          classTeacherId: this.ruleForm.region
        },
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(addData => {
        console.log(addData);
        if (addData.data.code == 200) {
          this.$message({
            message: "恭喜你，这是一条成功消息",
            type: "success"
          });
           this.$axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=${val}&pageSize=10`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
          this.dialogVisible = false;
          this.ruleForm.name = "";
          this.ruleForm.region = "";
        } else {
          this.$message({
            message: "恭喜你，这是一条成功消息",
            type: "warning"
          });
          this.ruleForm.name = "";
          this.ruleForm.region = "";
        }
      });
    },
    updata(id) {
      (this.dialogVisible2 = true), console.log(id);
      this.$axios({
        method: "GET",
        url: "http://122.112.253.28:8095/prod-api/basedata/bclass/" + id,
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(upData => {
        this.idd = id;
        this.upda = upData.data.data;
      });
    },
    updata2() {
      this.$axios({
        method: "PUT",
        url:
          "http://122.112.253.28:8095/prod-api/basedata/bclass/update/" +
          this.idd,
        data: this.upda,
        headers: {
          "Content-Type": "application/json",
          //把token放到请求头才能请求，这里的'Bearer '表示是后台希望更加的安全，依据后台给的信息看到底是加还是不加
          Authorization: window.sessionStorage.token
        }
      }).then(upData => {
        this.$message({
          message: "恭喜你，修改成功！",
          type: "warning"
        });
         this.$axios({
        method: "get",
        url: `http://122.112.253.28:8095/prod-api/basedata/bclass/list?pageNum=1&pageSize=10`,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(relt => {
        this.tableData = relt.data.data.list;
      });
        this.dialogVisible2 = false;
      });
    },
    del(id){
      this.$axios({
        method:'DELETE',
        url:'http://122.112.253.28:8095/prod-api/basedata/bclass/deleteByIds/'+id,
        headers: {
          Authorization: window.sessionStorage.token
        }
      }).then(del=>{
          this.$message('删除成功!');
      })
    }
  },
  mounted() {
    this.left();
    this.look();
    this.tab();
    this.banzhur();
  }
};
</script>
<style>
body {
  margin: 0;
}
.el-button.is-circle {
  clear: both;
  border-radius: 86%;
  padding: 0px;
  text-align: c;
  text-align: center;
  width: 48px;
  height: 48px;
}
.index_hz1 {
  overflow-x: hidden;
  overflow-y: auto;
  height: 720px;
  background: #304156;
}
.el-tree {
  position: relative;
  cursor: default;
  color: #bfcbd9;
  background: rgba(255, 255, 255, 0);
}
.index_hz1_1 {
  width: 100%;
  height: 65px;
  line-height: 65px;
  background: #2b2f3a;
}
.index_hz1_1 span {
  color: white;
  font-size: 17px;
  font-weight: bold;
}
.index_hz1_1 img {
  vertical-align: middle;
  margin-left: 10px;
}

.index_hz2 {
  height: 720px;
  overflow-x: hidden;
}
.index_hz2_1 {
  height: 75px;
  line-height: 60px;
  border: 1px rgb(236, 236, 236) solid;
}
.index_hz2_3 {
  text-align: center;
  clear: both;
  width: 100%;
  height: 80px;
  line-height: 80px;
}

.el-icon-s-fold:before {
  position: relative;
  top: 2px;
  left: 5px;
  content: "\E7A9";
  font-size: 19px;
}
.index_hz2_2 {
  float: right;
  margin-left: 400px;
  height: 60px;
  width: 210px;
}
#lalala {
  z-index: 999;
}
.el-icon-zoom-in:before {
  content: "\E777";
  font-size: 22px;
}
.el-icon-s-operation:before {
  margin-left: 10px;
  content: "\E7BB";
  font-size: 22px;
}
.el-icon-edit:before {
  margin-left: 10px;
  content: "\E78C";
  font-size: 22px;
}
.el-menu {
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  width: 240px;
  padding-left: 0;
  background-color: #304156;
}
.el-dropdown-link {
  cursor: pointer;
  color: rgb(105, 105, 105);
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-submenu__title {
  width: 240px;
  color: white;
}
form {
  clear: both;
}
.el-table {
  position: relative;
  overflow: hidden;
  top: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 92%;
  font-size: 14px;
  color: #606266;
  width: 600px;
}
</style>